<template>
  <div class="main">
    <div class="body">
      <div class="add">
        <div class="header">
          <div>账号数目({{ total }})个</div>
          <div>
            <el-button
              type="success"
              round
              size="mini"
              @click="dialogFormVisible = true"
              >添加账号</el-button
            >
          </div>
        </div>
        <!-- 添加弹框 -->
        <el-dialog title="添加账号" v-model="dialogFormVisible" width="30%">
          <el-form :model="formAdd">
            <el-form-item label="校区:">
              <el-select v-model="formAdd.campusid" placeholder="请选择校区">
                <el-option
                  v-for="item in compos"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账号">
              <el-input
                v-model="formAdd.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="formAdd.pass"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                v-model="formAdd.name"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                v-model="formAdd.tel"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="formAdd.email"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-input
                v-model="formAdd.address"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="InfoAdd()">确 定</el-button>
            </span>
          </template>
        </el-dialog>
        <!-- 修改账号 -->
            <el-dialog title="修改账号" v-model="dialogFormVisibles" width="30%">
          <el-form :model="formAdd">
            <el-form-item label="校区:">
              <el-select v-model="formAdd.campusid" placeholder="请选择校区">
                <el-option
                  v-for="item in compos"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账号">
              <el-input
                v-model="formAdd.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                v-model="formAdd.name"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                v-model="formAdd.tel"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="formAdd.email"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-input
                v-model="formAdd.address"
                autocomplete="off"
                width="100px"
              ></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisibles = false">取 消</el-button>
              <el-button type="primary" @click="updateAdd()">修 改</el-button>
            </span>
          </template>
        </el-dialog>
         <!-- 弹框end -->


        <div style="margin-left: 20px" @mouseover="info()" @mouseout="hide()">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              prop="username"
              width="300px"
              label="账号"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="name"
              width="300px"
              label="姓名"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              prop="address"
              width="300px"
              label="地址"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column width="300px" label="操作" show-overflow-tooltip>
              <template #default="scope">
                <div v-show="showa == 1">
                  <el-button type="success" round size="mini"
                    >重置密码</el-button
                  >
                  <el-button type="primary" round size="mini"   @click="dialogFormVisibles=true;updatadInfo(scope.row.id)">修改</el-button>
                  <el-button
                    type="danger"
                    round
                    size="mini"
                    @click="deleteInfo(scope)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="qeuryInfo.page"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="qeuryInfo.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  data() {
    return {
      // 添加
      formAdd: {
        username: "",
        pass: "",
        name: "",
        tel: "",
        email: "",
        address: "",
        campusid:''
      },
      // 校区下拉
      compos: [],
      // 分页
      total: 0,
      qeuryInfo: {
        page: 1,
        psize: 5,
      },
      showa: "2",
      dialogFormVisible: false,
      dialogFormVisibles: false,
      form: {
        name: "",
      },
      formdata: {
        username: "",
      },
      input3: ref(""),
      select: ref(""),
      tableData: [],
      multipleSelection: [],
      formInline: {
        user: "",
        region: "",
      },
      urriculumInfos: [],
    };
  },
  created() {
    this.getItemList();
    this.getItemLists();
  },
  methods: {
    
    // 添加校区下拉
    async getItemLists() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/campus/list"
      );
      this.compos = res.data.list;
    },
    // 删除
    async deleteInfo(Info) {
      const dele = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (dele !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const InfoId = Info.row.id;
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/company/delete",
        { params: { id: InfoId } }
      );
      if (res.errCode == 10000) {
        this.$message.success("删除成功");
        this.getItemList();
      } else {
        this.message.error("删除失败");
      }
      // console.log(res);
    },
    // 分页
    handleSizeChange(val) {
      this.qeuryInfo.psize = val;
      this.getItemList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.qeuryInfo.page = val;
      this.getItemList();
      // console.log(`当前页: ${val}`);
    },
    // 修改
    updatadInfo(id){
      console.log(this.compos)
      this.formAdd.id = id
      this.tableData.forEach((item) => {
        console.log(item)
        if(item.id == id){
            
          // this.compos.item = item.title
          this.formAdd.username = item.username
          this.formAdd.name = item.name
          this.formAdd.tel = item.tel
          this.formAdd.email = item.email
          this.formAdd.address = item.address
          this.formAdd.nacampusidme = item.campusid
        }
      })
    },
    // 控制操作按钮的显示跟隐藏
    info() {
      const self = this;
      self.showa = "1";
    },
    hide() {
      const self = this;
      self.showa = "2";
    },
    async InfoAdd() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/company/add",
        this.formAdd
      );
      if (res.errCode == 10000) {
        this.$message.success("添加成功");
        this.dialogFormVisible = false;
        this.getItemList();
      } else {
        this.$message.error("添加失败");
      }
      // console.log(res);
    },
    
        async updateAdd() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/company/add",
        this.formAdd
      );
      if (res.errCode == 10000) {
        this.$message.success("修改成功");
        this.dialogFormVisibles = false;
        this.getItemList();
      } else {
        this.$message.error("修改失败");
      }
      console.log(res);
    },
    //获取账号管理列表
    async getItemList() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/company/list",
        { params: this.qeuryInfo }
      );
      this.tableData = res.data.list;
      this.total = res.data.counts;
      // console.log(res);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
});
</script>
<style>
.header {
  width: 98%;
  height: 60px;
  background-color: #fff;
  border: 2px solid #f5f5f5;
  margin-left: 1.8%;
  display: flex;
  justify-content: space-between;
  margin-top: 2%;
  margin-bottom: 2%;
}
.header div {
  line-height: 60px;
}
.header div:nth-child(1) {
  margin-left: 2%;
}
.header div:nth-child(2) {
  margin-right: 2%;
}
.body {
  display: flex;
}
.block {
  margin-left: 15px;
}
.active {
  background: #fd7522;
  border: 1px solid #fd7522;
  color: #fff;
}
.infosa {
  width: 25%;
}
.classInfoa {
  margin-left: 2%;
  height: 30px;
  display: flex;
  line-height: 30px;
  /* align-items: center; */
  border: 1px solid #ccc;
  background-color: #fff;
}
.classInfoa div:nth-child(2) {
  line-height: 30px;
}
.classInfoa > div > input {
  padding-left: 15px;
}
.searcha {
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
  line-height: 30px;
}
.infoa {
  display: flex;
  flex-direction: row;
  width: 450px;
  align-items: center;
  margin-top: 10px;
  margin-left: 30px;
}
.infosaa {
  width: 25%;
}
</style>